<template>
  <el-dialog
    v-model="data.dialogVisible"
    title="选址因子配置"
    width="70%"
    :close-on-click-modal="false"
    @close="handlerClosed"
  >
    <ElTreeTransferCom
      width="100%"
      height="500px"
      from_title="因子列表"
      to_title="已选因子"
      v-model:from_data="fromData"
      v-model:to_data="toData"
      @addBtn="addBtn"
      @removeBtn="removeBtn"
    />
    <!--  <el-transfer
      v-model="rightValue"
      :props="{ key: 'id', label: 'label' }"
      :data="leftValue"
      filterable
      :filter-method="filterMethod"
      filter-placeholder="请输入关键词搜索"
      @change="getObject"
      :button-texts="['移除因子', '添加因子']"
      :titles="['因子列表', '已选因子']"
    ></el-transfer>-->
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="data.confirm">保存修改</el-button>
        <el-button @click="data.cancelEdit">取消修改</el-button>
        <el-button @click="data.resetReason">重置因子</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { transferData } from "./data";
import { ref, reactive, watch, withDefaults } from "vue";
import ElTreeTransferCom from "../../../components/ElTreeTransfer/ElTreeTransfer.vue";
import "el-tree-transfer-vue3/dist/style.css";

interface DataObj {
  //定义为接口类型，更加详细的定义对象里的每个属性值类型
  dialogVisible: boolean;
  confirm: () => any; //确认
  cancelEdit: () => any; //取消修改
  resetReason: () => any; //重置因子
  getList: () => any;
  //   handle: (item: string) => void;
  //   [propName: string]: any; //该对象还可加入任意属性值类型
}
const parentProps = withDefaults(defineProps<{ visible?: boolean }>(), {
  visible: false,
});
const fromData = ref(transferData.ruleInfo.left);
const toData = ref([]);
const addBtn = (v: any) => {
  // console.error(v)
  fromData.value = v;
};
const removeBtn = (v: any) => {
  toData.value = v;
};
let arr = reactive([]);
let data = reactive<DataObj>({
  dialogVisible: false,
  //搜索
  confirm: () => {
    data.dialogVisible = false;
    arr = toData.value.reduce((cur: any, pre: any): any => {
      cur.push(pre.children);
      return cur;
    }, []);
    emit("getNewReason", arr.flat(1));
  },
  //取消修改
  cancelEdit: (): any => {
    data.dialogVisible = false;
  },
  //重置因子
  resetReason: (): any => {},
  //请求
  getList: () => {
    console.log("请求", 914326);
  },
});
const emit = defineEmits(["close", "getNewReason"]);
const handlerClosed = () => {
  emit("close", false);
};
watch(
  () => parentProps.visible,
  (val) => {
    if (val) {
      console.log(val, "val");
      data.dialogVisible = val;
      //请求
    }
  }
);
</script>
<style lang="less">
.mint-transfer .transfer-left,
.mint-transfer .transfer-right {
  overflow: hidden;
  padding-bottom: 10px;
  box-sizing: border-box;
}
.mint-transfer .transfer-left .transfer-left-content,
.mint-transfer .transfer-left .transfer-right-content,
.mint-transfer .transfer-right .transfer-left-content,
.mint-transfer .transfer-right .transfer-right-content {
  height: 94%;
}
.mint-transfer .transfer-left .transfer-left-content .transfer-input,
.mint-transfer .transfer-left .transfer-right-content .transfer-input,
.mint-transfer .transfer-right .transfer-left-content .transfer-input,
.mint-transfer .transfer-right .transfer-right-content .transfer-input {
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  .el-input__icon {
    width: 35px !important;
    line-height: 60px !important;
  }
}
:deep(.el-scrollbar__view) {
  height: auto;
}
</style>
<style lang="less" scoped>
.el-input__icon {
  width: 35px !important;
  line-height: 60px !important;
}
:deep(.mint-transfer .transfer) {
  justify-content: space-between;
  width: 100%;
}
.el-dialog {
  width: 100%;
  .el-dialog__footer {
    .dialog-footer {
      display: flex;
      justify-content: center;
    }
  }
}
:deep(.mint-transfer .transfer) {
  display: flex !important;
  justify-content: space-around !important;
}
</style>